


    




<!DOCTYPE HTML>

<html>
    <head>
        <script type="application/ld+json">
    {
        "@context" : "http://schema.org",
        "@type" : "BlogPosting",
        "mainEntityOfPage": {
             "@type": "WebPage",
             "@id": "\/"
        },
        "articleSection" : "blog",
        "name" : "Blog",
        "headline" : "Blog",
        "description" : "",
        "inLanguage" : "en",
        "author" : "",
        "creator" : "",
        "publisher": "",
        "accountablePerson" : "",
        "copyrightHolder" : "",
        "copyrightYear" : "2014",
        "datePublished": "2014-09-28 00:00:00 \u002b0000 UTC",
        "dateModified" : "2014-09-28 00:00:00 \u002b0000 UTC",
        "url" : "\/blog\/",
        "wordCount" : "0",
        "keywords" : [ "Blog" ]
    }
    </script>
        
            <title>Blog - Hugo Future Imperfect</title>
        

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="generator" content="Hugo 0.74.3" />
        


        
        
            
                <meta name="description" content="HTML5 UP theme, Future Imperfect with some extra goodies, ported by Julio Pescador. Powered by Hugo">
            
        

        <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Blog"/>
<meta name="twitter:description" content="HTML5 UP theme, Future Imperfect with some extra goodies, ported by Julio Pescador. Powered by Hugo"/>
<meta name="twitter:site" content="@example"/>

        <meta property="og:title" content="Blog" />
<meta property="og:description" content="HTML5 UP theme, Future Imperfect with some extra goodies, ported by Julio Pescador. Powered by Hugo" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/blog/" />
<meta property="og:updated_time" content="2014-09-28T00:00:00+00:00" />

        <meta property="og:image" content="//images/logo.png">
        <meta property="og:image:type" content="image/png">
        <meta property="og:image:width" content="512">
        <meta property="og:image:height" content="512">
        <meta itemprop="name" content="Blog">
<meta itemprop="description" content="HTML5 UP theme, Future Imperfect with some extra goodies, ported by Julio Pescador. Powered by Hugo">

        

        
            
        

        
        
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css">
            <link rel="stylesheet" href="/css/main.css">
            <link rel="stylesheet" href="/css/add-on.css">
            <link rel="stylesheet" href="/css/academicons.min.css">
        

        
            
                
            
        


  
    
    <link href='//cdn.bootcss.com/highlight.js/9.11.0/styles/github.min.css' rel='stylesheet' type='text/css' />
  


      
    </head>
    <body>

      
      <div id="wrapper">

    
<header id="header">
    
      <h1><a href="/">blog</a></h1>
    

    <nav class="links">
        <ul>
            
                <li>
                    <a href="/">
                            <i class="fa fa-home">&nbsp;</i>Home
                    </a>
                </li>
            
                <li>
                    <a href="/about/">
                            <i class="fa fa-id-card-o">&nbsp;</i>About
                    </a>
                </li>
            
                <li>
                    <a href="/blog/">
                            <i class="fa fa-newspaper-o">&nbsp;</i>Blog
                    </a>
                </li>
            
                <li>
                    <a href="/itemized/">
                            <i class="fa fa-list">&nbsp;</i>Itemized
                    </a>
                </li>
            
                <li>
                    <a href="/categories/">
                            <i class="fa fa-sitemap">&nbsp;</i>Categories
                    </a>
                </li>
            
                <li>
                    <a href="/contact/">
                            <i class="fa fa-envelope-o">&nbsp;</i>Contact
                    </a>
                </li>
            
        </ul>
    </nav>
    <nav class="main">
        <ul>
            
            <li class="search">
                <a class="fa-search" href="#search">Search</a>
                <form id="search" method="get" action="//google.com/search">
                    <input type="text" name="q" placeholder="Search" />
                    <input type="hidden" name="as_sitesearch" value="/">
                </form>
            </li>
            <li class="menu">
                <a class="fa-bars" href="#menu">Menu</a>
            </li>
        </ul>
    </nav>
</header>


<section id="menu">

    
        <section>
            <form class="search" method="get" action="//google.com/search">
                <input type="text" name="q" placeholder="Search" />
                <input type="hidden" name="as_sitesearch" value="/">
            </form>
        </section>

    
        <section>
            <ul class="links">
                
                    <li>
                        <a href="/">
                            <h3>
                                <i class="fa fa-home">&nbsp;</i>Home
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/about/">
                            <h3>
                                <i class="fa fa-id-card-o">&nbsp;</i>About
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/">
                            <h3>
                                <i class="fa fa-newspaper-o">&nbsp;</i>Blog
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/itemized/">
                            <h3>
                                <i class="fa fa-list">&nbsp;</i>Itemized
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories/">
                            <h3>
                                <i class="fa fa-sitemap">&nbsp;</i>Categories
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/contact/">
                            <h3>
                                <i class="fa fa-envelope-o">&nbsp;</i>Contact
                            </h3>
                        </a>
                    </li>
                
            </ul>
        </section>

    
        <section class="recent-posts">
            <div class="mini-posts">
                <header>
                    <h3>Recent Posts</h3>
                </header>
                

                
                    
                

                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/creating-a-new-theme/">Creating a New Theme</a></h3>
                                
                                <time class="published" datetime=
                                    '2014-09-28'>
                                    September 28, 2014</time>
                            </header>
                            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/creating-a-new-theme/" class="image featured">
            <img src="/img/2014/09/pic03.jpg" alt="">
        </a>
    


                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/goisforlovers/">(Hu)go Template Primer</a></h3>
                                
                                <time class="published" datetime=
                                    '2014-04-02'>
                                    April 2, 2014</time>
                            </header>
                            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/goisforlovers/" class="image featured">
            <img src="/img/2014/04/pic02.jpg" alt="">
        </a>
    


                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/hugoisforlovers/">Getting Started with Hugo</a></h3>
                                
                                <time class="published" datetime=
                                    '2014-04-02'>
                                    April 2, 2014</time>
                            </header>
                            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/hugoisforlovers/" class="image featured">
            <img src="/img/2014/04/pic01.jpg" alt="">
        </a>
    


                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a></h3>
                                
                                <time class="published" datetime=
                                    '2014-03-10'>
                                    March 10, 2014</time>
                            </header>
                            

                        </article>
                

                
            </div>
        </section>

    
        
</section>

    
    <div id="main">
        
        
            <article class="post">
  <header>
    <div class="title">
        
            <h2><a href="/blog/creating-a-new-theme/">Creating a New Theme</a></h2>
        
        
            <p>Learn how to create a theme on Hugo</p>
        
    </div>
    <div class="meta">
        

        <time class="published"
            datetime='2014-09-28'>
            September 28, 2014</time>
        <span class="author">Theme author</span>
        
            <p>35 minute read</p>
        
        
    </div>
</header>

  
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/creating-a-new-theme/" class="image featured">
            <img src="/img/2014/09/pic03.jpg" alt="">
        </a>
    


  
  <p>This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme.</p>
  <footer>
    <ul class="actions">
      <li><a href="/blog/creating-a-new-theme/" class="button big">Continue Reading</a></li>
    </ul>
  <ul class="stats">
  <li class="categories">
    <ul>
        
            
            
                <i class="fa fa-folder"></i>
                
                
                <li><a class="article-category-link" href="/categories/hugo">Hugo</a></li>
                
            
        
    </ul>
  </li>
  <li class="tags">
    <ul>
        
            
            
                <i class="fa fa-tags"></i>
                
                
                <li><a class="article-category-link" href="/tags/tutorial">tutorial</a></li>
                
            
        
    </ul>
  </li>
</ul>

  </footer>
</article>

        
            <article class="post">
  <header>
    <div class="title">
        
            <h2><a href="/blog/goisforlovers/">(Hu)go Template Primer</a></h2>
        
        
    </div>
    <div class="meta">
        

        <time class="published"
            datetime='2014-04-02'>
            April 2, 2014</time>
        <span class="author">Unknown Author</span>
        
            <p>7 minute read</p>
        
        
    </div>
</header>

  
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/goisforlovers/" class="image featured">
            <img src="/img/2014/04/pic02.jpg" alt="">
        </a>
    


  
  <p>Hugo uses the excellent <a href="http://golang.org/">go</a> <a href="http://golang.org/pkg/html/template/">html/template</a> library for
its template engine. It is an extremely lightweight engine that provides a very
small amount of logic. In our experience that it is just the right amount of
logic to be able to create a good static website. If you have used other
template systems from different languages or frameworks you will find a lot of
similarities in go templates.</p>
  <footer>
    <ul class="actions">
      <li><a href="/blog/goisforlovers/" class="button big">Continue Reading</a></li>
    </ul>
  <ul class="stats">
  <li class="categories">
    <ul>
        
            
            
                <i class="fa fa-folder"></i>
                
                
                <li><a class="article-category-link" href="/categories/go">Go</a></li>
                
            
        
    </ul>
  </li>
  <li class="tags">
    <ul>
        
    </ul>
  </li>
</ul>

  </footer>
</article>

        
            <article class="post">
  <header>
    <div class="title">
        
            <h2><a href="/blog/hugoisforlovers/">Getting Started with Hugo</a></h2>
        
        
    </div>
    <div class="meta">
        

        <time class="published"
            datetime='2014-04-02'>
            April 2, 2014</time>
        <span class="author">Hugo author</span>
        
            <p>2 minute read</p>
        
        
    </div>
</header>

  
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/hugoisforlovers/" class="image featured">
            <img src="/img/2014/04/pic01.jpg" alt="">
        </a>
    


  
  <p>Go to <a href="https://github.com/spf13/hugo/releases">hugo releases</a> and download the
appropriate version for your os and architecture.</p>
  <footer>
    <ul class="actions">
      <li><a href="/blog/hugoisforlovers/" class="button big">Continue Reading</a></li>
    </ul>
  <ul class="stats">
  <li class="categories">
    <ul>
        
            
            
                <i class="fa fa-folder"></i>
                
                
                <li><a class="article-category-link" href="/categories/hugo">Hugo</a></li>
                
            
        
    </ul>
  </li>
  <li class="tags">
    <ul>
        
    </ul>
  </li>
</ul>

  </footer>
</article>

        

        
<ul class="actions pagination">
    
        <li><a href="#" class="disabled button big previous">Previous Page</a></li>
    

    
        <li><a href="/blog/page/2/"
                class="button big next">Next Page</a></li>
    
</ul>

    </div>
    
<section id="sidebar">

  
  <section id="intro">
    
    
      
        <a href='/' class="logo"><img src="/img/main/logo.jpg" alt="Hugo Future Imperfect" /></a>
      
    
    
      <header>
        <h2>Hugo Future Imperfect</h2>
        <p>Another fine responsive site template by <a href="http://html5up.net">HTML5 UP</a>. Ported by Julio Pescador with some extra goodies <i class='fa fa-hand-peace-o'></i></p>
      </header>
    
    
      <ul class="icons">
        
          
    <li><a href="/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        
  <li><a href="//github.com/jpescador/hugo-future-imperfect" target="_blank" title="GitHub" class="fa fa-github"></a></li>















  <li><a href="//flickr.com/photos/example" target="_blank" title="Flickr" class="fa fa-flickr"></a></li>











  <li><a href="//linkedin.com/in/example" target="_blank" title="LinkedIn" class="fa fa-linkedin"></a></li>



  <li><a href="//linkedin.com/company/examplebusiness" target="_blank" title="LinkedIn Company" class="fa fa-linkedin"></a></li>









  <li><a href="//facebook.com/example" target="_blank" title="Facebook" class="fa fa-facebook"></a></li>





  <li><a href="//reddit.com/user/example" target="_blank" title="Reddit" class="fa fa-reddit"></a></li>

















  <li><a href="//instagram.com/example" target="_blank" title="Instagram" class="fa fa-instagram"></a></li>





  <li><a href="//twitter.com/example" target="_blank" title="Twitter" class="fa fa-twitter"></a></li>







  <li><a href="//pinterest.com/example" target="_blank" title="Pinterest" class="fa fa-pinterest-p"></a></li>



  <li><a href="//telegram.me/example" target="_blank" title="telegram" class="fa fa-telegram"></a></li>









<li><a href="//researchgate.net/profile/example" target="_blank" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>



  <li><a href="mailto:example" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
  </section>

  
  <section class="recent-posts">
    <div class="mini-posts">
      <header>
        <h3>Recent Posts</h3>
      </header>
      <div class="posts-container">
        

        
          
        

        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/creating-a-new-theme/">Creating a New Theme</a>
              </h3>
              
              <time class="published" datetime='2014-09-28'>
                September 28, 2014
              </time>
            </header>
            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/creating-a-new-theme/" class="image featured">
            <img src="/img/2014/09/pic03.jpg" alt="">
        </a>
    


          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/goisforlovers/">(Hu)go Template Primer</a>
              </h3>
              
              <time class="published" datetime='2014-04-02'>
                April 2, 2014
              </time>
            </header>
            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/goisforlovers/" class="image featured">
            <img src="/img/2014/04/pic02.jpg" alt="">
        </a>
    


          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/hugoisforlovers/">Getting Started with Hugo</a>
              </h3>
              
              <time class="published" datetime='2014-04-02'>
                April 2, 2014
              </time>
            </header>
            
    

    
        
        







  
  
    
  


        
        
        

        <a href="/blog/hugoisforlovers/" class="image featured">
            <img src="/img/2014/04/pic01.jpg" alt="">
        </a>
    


          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a>
              </h3>
              
              <time class="published" datetime='2014-03-10'>
                March 10, 2014
              </time>
            </header>
            

          </article>
        
      </div>

      
    </div>
  </section>

  
  
  
  
  
    <section id="categories">
      <header>
        <h3>
          <a href="/categories/">Categories</a>
        </h3>
      </header>
        
          
        

        
        <p>
          <article>
            <header>
              
                <a href="/categories/hugo/">hugo</a>
                <span style="float:right;">3</span>
              
            </header>
          </article>
        </p>
        
        <p>
          <article>
            <header>
              
                <a href="/categories/go/">go</a>
                <span style="float:right;">1</span>
              
            </header>
          </article>
        </p>
        
        <p>
          <article>
            <header>
              
                <a href="/categories/jekyll/">jekyll</a>
                <span style="float:right;">1</span>
              
            </header>
          </article>
        </p>
        
    </section>
  
  

  
  
    <section id="mini-bio">
      <h3>About</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus lacus, auctor vehicula molestie quis, tempor quis velit. Quisque in quam ac leo efficitur vulputate. Phasellus ullamcorper aliquam sodales. Maecenas sit amet condimentum ipsum. Proin sit amet ligula elit. Mauris.</p>
      <a href="/about/" class="button">Learn More</a>
    </section>
  

  
  <section id="footer">
    
      <ul class="icons">
        
          
    <li><a href="/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        
  <li><a href="//github.com/jpescador/hugo-future-imperfect" target="_blank" title="GitHub" class="fa fa-github"></a></li>















  <li><a href="//flickr.com/photos/example" target="_blank" title="Flickr" class="fa fa-flickr"></a></li>











  <li><a href="//linkedin.com/in/example" target="_blank" title="LinkedIn" class="fa fa-linkedin"></a></li>



  <li><a href="//linkedin.com/company/examplebusiness" target="_blank" title="LinkedIn Company" class="fa fa-linkedin"></a></li>









  <li><a href="//facebook.com/example" target="_blank" title="Facebook" class="fa fa-facebook"></a></li>





  <li><a href="//reddit.com/user/example" target="_blank" title="Reddit" class="fa fa-reddit"></a></li>

















  <li><a href="//instagram.com/example" target="_blank" title="Instagram" class="fa fa-instagram"></a></li>





  <li><a href="//twitter.com/example" target="_blank" title="Twitter" class="fa fa-twitter"></a></li>







  <li><a href="//pinterest.com/example" target="_blank" title="Pinterest" class="fa fa-pinterest-p"></a></li>



  <li><a href="//telegram.me/example" target="_blank" title="telegram" class="fa fa-telegram"></a></li>









<li><a href="//researchgate.net/profile/example" target="_blank" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>



  <li><a href="mailto:example" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
    <p class="copyright">
      
        &copy; 2017
        
          Hugo Future Imperfect
        
      .
      Powered by <a href="//gohugo.io" target="_blank">Hugo</a>
    </p>
  </section>
</section>

    </div>
    <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
    

    
      
    

    
      
      
      
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
        
        
        
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/r.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/yaml.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/css.min.js"></script>
        <script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
      
    
    
    
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
      <script src="/js/util.js"></script>
      <script src="/js/main.js"></script>
      <script src="/js/backToTop.js"></script>
    

    
      
        
      
    

    
    <script>hljs.initHighlightingOnLoad();</script>
      <script src="//yihui.name/js/math-code.js"></script>
<script async
src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>


  </body>
</html>

